<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <link rel="stylesheet" href="../common.css" />
  <style>
    .container {
      width: 200px;
      height: 200px;
      position: relative;
      /* transform: rotateX(55deg); */
    }
    svg {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
    .container circle {
      fill: none;
    }
    .outer-circle {
      transform-origin: center;
      animation: rotate 5s infinite linear;
    }
    .inner-circle {
      transform-origin: center;
      animation: rotate 5s infinite linear reverse;
    }
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(1turn);
      }
    }

    .container span {
      font-family: "Bahnschrift";
      text-anchor: middle;
      fill: white;
      font-size: 40px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>

  <body>
    <div id="app">
      <div class="container">
        <svg viewBox="0 0 100 100">
          <mask id="mask">
            <!-- 用一个蒙版mask -->
            <circle
              cx="50"
              cy="50"
              r="40"
              stroke-dasharray="5 0.5"
              stroke-width="5"
              stroke="#fff"
            ></circle>
          </mask>
          <!-- 设置底部最大的圆环 -->
          <circle
            cx="50"
            cy="50"
            r="40"
            stroke-dasharray="5 0.5"
            stroke-width="5"
            stroke="#112E3C"
          ></circle>
          <!-- 设置进度条的颜色、长度等，覆盖蒙版 -->
          <circle
            cx="50"
            cy="50"
            r="40"
            :stroke-dasharray="getCircleDash(curr, total, 40)"
            stroke-width="5"
            stroke="#3EC8FE"
            mask="url(#mask)"
            class="outer-circle"
          ></circle>
        </svg>
        <svg viewBox="0 0 100 100">
          <mask id="mask1">
            <!-- 用一个蒙版mask -->
            <circle
              cx="50"
              cy="50"
              r="30"
              stroke-dasharray="5 0.8"
              stroke-width="5"
              stroke="#fff"
            ></circle>
          </mask>
          <!-- 设置底部最大的圆环 -->
          <circle
            cx="50"
            cy="50"
            r="30"
            stroke-dasharray="5 0.8"
            stroke-width="5"
            stroke="#112E3C"
          ></circle>
          <!-- 设置进度条的颜色、长度等，覆盖蒙版 -->
          <circle
            cx="50"
            cy="50"
            r="30"
            :stroke-dasharray="getCircleDash(curr, total, 40)"
            stroke-width="5"
            stroke="#3EC8FE"
            mask="url(#mask1)"
            class="inner-circle"
          ></circle>
        </svg>
        <span> {{ getPercent(curr, total) }}%</span>
      </div>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          total: 200,
          curr: 88,
        };
      },
      methods: {
        getPercent(e1, e2) {
          return ((100 * e1) / e2).toFixed(0);
        },
        getCircleDash(e1, e2, r) {
          let girth = 2 * Math.PI * r;
          return (e1 / e2) * girth + " " + girth;
        },
        getDash(r) {
          return r * 0.3 + " " + r * 0.1;
        },
      },
    });
  </script>
</html>
